<template>
  <basic-container>
    <el-row>
      <el-col>
        <el-form :inline="true">
          <el-form-item>
            <el-select placeholder="产品名称">
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input placeholder="区服"/>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="关键字" v-model="input3" class="input-with-select">
              <el-select v-model="select" slot="prepend" placeholder="角色名称">
                <el-option label="角色名称" value="角色名称"></el-option>
                <el-option label="玩家账号" value="玩家代码"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="订单标识"/>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="组长">
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select placeholder="推广员">
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="value2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>


          <el-form-item>
            <el-button icon="el-icon-search" type="primary">查询</el-button>
            <el-button icon="el-icon-check" type="primary">一键批量发放</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-radio-group  v-model="radio1">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="未发放"></el-radio-button>
          <el-radio-button label="发放成功"></el-radio-button>
          <el-radio-button label="发放失败"></el-radio-button>
          <el-radio-button label="拒绝"></el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="玩家账号">
            </el-table-column>
            <el-table-column
              prop="name"
              label="玩家代码">
            </el-table-column>
            <el-table-column
              prop="address"
              label="游戏">
            </el-table-column>
            <el-table-column
              prop="address"
              label="区服">
            </el-table-column>
            <el-table-column
              prop="address"
              label="角色名">
            </el-table-column>
            <el-table-column
              prop="address"
              label="返利类型">
            </el-table-column>
            <el-table-column
              prop="address"
              label="首充金额">
            </el-table-column>
            <el-table-column
              prop="address"
              label="福利内容">
            </el-table-column>
            <el-table-column
              prop="address"
              label="达成时间">
            </el-table-column>
            <el-table-column
              prop="address"
              label="组长账号">
            </el-table-column>
            <el-table-column
              prop="address"
              label="推广员账号">
            </el-table-column>
            <el-table-column
              prop="address"
              label="状态">
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看明细</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>

</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>


<script>

export default {
  data() {
    return {
      radio1:'全部',
      input1: '',
      input2: '',
      input3: '',
      select: '角色名称',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: ''
    };

  },

  computed: {},

  methods: {}
}

</script>

<style>
</style>
